<template>
	<view class="home">
		<u-navbar title="工单详情"  autoBack >
		<!-- <u-navbar title="工单详情" :bgColor="bgColor" autoBack :leftIconColor="color" :titleStyle="`color:${color}`"> -->
		</u-navbar>
		<view class="bill"></view>
		<view class="info">
			<component :is="infoTitle" :item="data"></component>
		</view>
		<view class="cargo">
			<view class="cargo-title">货物信息</view>
			<view class="cargo-item u-flex-y-center u-m-t-30">
				<u-text text="工单名称" size="28rpx" color="#999"></u-text>
				<u-text :text="data.name" size="28rpx" align="right" color="#333"></u-text>
			</view>
			<view class="cargo-item u-flex-y-center u-m-t-30">
				<u-text text="绑定车辆" size="28rpx" color="#999"></u-text>
				<u-text :text="data.car_number" size="28rpx" align="right" color="#333"></u-text>
			</view>
			<view class="cargo-item u-flex-y-center u-m-t-30">
				<u-text text="货物名称" size="28rpx" color="#999"></u-text>
				<u-text :text="data.goods_name" size="28rpx" align="right" color="#333"></u-text>
			</view>
			<view class="cargo-item u-flex-y-center u-m-t-30">
				<u-text text="工单创建时间" size="28rpx" color="#999"></u-text>
				<u-text :text="parseTime(data.createtime)" size="28rpx" align="right" color="#333"></u-text>
			</view>
			<view class="cargo-item u-flex-y-center u-m-t-30">
				<u-text text="公里数" size="28rpx" color="#999"></u-text>
				<u-text :text="`${data.kilometers}公里`" size="28rpx" align="right" color="#333"></u-text>
			</view>
		</view>
		<view class="cargo">
			<block v-if="userInfo.group_id == 1">
				<view class="cargo-title">费用</view>
				<view class="cargo-item u-flex-y-center u-m-t-30">
					<u-text text="应收款" size="28rpx" color="#999"></u-text>
					<u-text :text="`￥${data.money||0}`" size="28rpx" align="right" color="#FF5353"></u-text>
				</view>
			</block>
			<block v-if="data.yingfu_group&&data.yingfu_group.length">
				<view class="gap" v-if="userInfo.group_id == 1"></view>
				<view class="cargo-item u-flex-y-center u-m-t-30">
					<u-text text="应付款" size="28rpx" color="#999"></u-text>
					<!-- 	<u-text :text="`￥${data.yingfu_money}`" size="28rpx" align="right" color="#FF5353"></u-text> -->
				</view>
				<view class="cargo-item u-flex-y-center u-m-t-30" v-for="(item,index) in data.yingfu_group" :key="index">
					<u-text :text="item.title" size="28rpx" color="#999"></u-text>
					<u-text :text="`￥${item.money}`" size="28rpx" align="right" color="#333"></u-text>
				</view>
			</block>
		</view>
		<view class="cargo" v-if="data.deliver_images">
			<view class="cargo-title">送达图片</view>
			<u-row gutter="10">
				<u-col span="4" v-for="(item,index) in data.deliver_images" :key="index">
					<u-image :src="prefixURL(item)" customStyle="marginTop:20rpx" width="170rpx" height="170rpx" radius="12rpx"></u-image>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script setup>
	import { onMounted, ref } from "vue";
	import infoTitle from '@/components/info-title/info-title.vue'
	import { orderInfo } from "../../config/api";
	import { prefixURL } from "../../util/util";
	import { getCache, parseTime } from '@/util/util.js'
	import { onPageScroll} from '@dcloudio/uni-app'
	const props = defineProps({
		id: {
			type: [String, Number],
			default: ''
		}
	})
	const bgColor = ref('unset')
	const color = ref('#fff')
	const data = ref({});
	const userInfo = getCache('userInfo')
	onMounted(() => {
		_orderInfo()
	})
	onPageScroll((e)=>{
		if(e.scrollTop > 20) {
			bgColor.value = '#fff'
			color.value = '#000'
		}else{
			bgColor.value = 'unset'
			color.value = '#fff'
		}
		
	})
	const _orderInfo = () => {
		orderInfo({
			order_id: props.id
		}).then(res => {
			data.value = res.data
		})
	}
</script>
<style scoped lang="scss">
	.home {
		min-height: 100vh;
		z-index: 1;
		position: relative;
		padding: 20rpx 30rpx;
		background: #fafafa;
	}

	.bill {
		height: 496rpx;
		background: linear-gradient(180deg, #0C9BF4 0%, #FAFAFA 100%);
		position: absolute;
		z-index: -1;
		width: 100%;
		top: 0;
		left: 0;
	}

	.info {
		margin-top: 100rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.cargo {
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-top: 20rpx;

		.cargo-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 800;
		}

		.gap {
			width: 646rpx;
			height: 16rpx;
			background: #F5F5F5;
			margin-top: 30rpx;
		}
	}

	::v-deep(.u-row) {
		flex-wrap: wrap;
	}
</style>